<template>
  <div>
    <div class="my-top-box">
      <div class="logo">
        <img src="https://www.zgmyncpjyw.com/uploadfiles/head.png" alt="" />
      </div>
      <div class="set">
        <ul>
          <li>修改个人信息<van-icon name="arrow"  @click="toPersonFix" /></li>
          <li><span class="exit" @click="exit">退出</span><span>注销</span></li>
          <li>绑定手机号</li>
          <li>未读消息(0)</li>
        </ul>
      </div>
      <div class="condirm">
        <van-button class="button title">
          <template #icon>
            <van-icon name="phone-circle-o" />
          </template>
          个人认证
        </van-button>
        <van-button color="orange" class="button">
          <template #icon>
            <van-icon name="chart-trending-o" />
          </template>
          企业认证
        </van-button>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { Dialog } from "vant";
import "vant/es/dialog/style";
import { useRouter } from "vue-router";
const $router = useRouter();
function exit() {
  Dialog.confirm({
    title: "退出登录",
    message: "亲，确认退出登录吗?",
  })
    .then(() => {
      sessionStorage.clear();
      $router.push("/regsiter");
    })
    .catch(() => {
      // on cancel
    });
}
function toPersonFix(){
   $router.push("/personFix");
}
</script>
  
  <style scoped>
.my-top-box {
  width: 100%;
  height: 120px;
  background-color: #1a9956;
  display: flex;
  padding-left: 10px;
}
.logo {
  width: 60px;
  height: 100%;
  text-align: center;
  padding-top: 20px;
}
.logo img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.set {
  flex: 1;
  height: 100%;
}
.set ul {
  margin: 0;
}
.set ul li {
  margin-bottom: -20px;
  font-size: 14px;
}
.exit {
  margin-right: 20px;
}
.condirm {
  width: 150px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 25px;
  padding-right: 10px;
}
.button {
  height: 30px;
  border-radius: 20px;
  margin-bottom: 20px;
  color: #1a9956;
}
.title {
  color: #1a9956;
}
</style>